<template>
  <div class="dangling">
    <div class="side-share">
      <div class="common-share img1" @click="handleTarget('ewm')">
        <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/erweima.png" alt="公众号" />
        <span>公众号</span>
      </div>
      <div class="common-share img2" @click="handleTarget('applet')">
        <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/applet.png" alt="小程序" />
        <span>小程序</span>
      </div>
      <div class="common-share img3">
        <el-backtop>
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/goTop.png" alt="返回顶部" />
          <span>返回顶部</span>
        </el-backtop>
      </div>
    </div>
    <div class="side-ewm1" v-if="showEwm">
      <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/side-ewm1.png" alt="公众号" />
    </div>
    <div class="side-ewm2" v-if="showApplet">
      <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/side-ewm2.png" alt="小程序" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      showEwm: false,
      showApplet: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleTarget(val) {
      if (val == "ewm") {
        this.showEwm = !this.showEwm
        this.showApplet = false
      } else {
        this.showApplet = !this.showApplet
        this.showEwm = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dangling {
  .side-share {
    width: 80px;
    height: 260px;
    position: fixed;
    top: 50%;
    right: 0;
    margin-top: -130px;
    transition: all 0.4s;
    background: #f6f7f9;
    cursor: pointer;
    user-select: none;
    z-index: 999;
    .common-share {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
      img {
        width: 24px;
        height: 24px;
      }
      span {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        line-height: 16px;
        margin-top: 10px;
      }
    }
    .img1:hover img {
      content: url("https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/erweima-red.png");
    }
    .img2:hover img {
      content: url("https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/applet-red.png");
    }
    .img3:hover img {
      content: url("https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/goTop-red.png");
    }
    .common-share:hover span {
      color: #fb463f;
    }
  }
  .side-ewm1 {
    position: fixed;
    right: 80px;
    top: 50%;
    margin-top: -210px;
    z-index: 99;
    img {
      width: 280px;
      height: 270px;
    }
  }
  .side-ewm2 {
    position: fixed;
    right: 80px;
    top: 50%;
    margin-top: -130px;
    z-index: 99;
    img {
      width: 280px;
      height: 270px;
    }
  }
}
::v-deep .el-backtop {
  width: 100%;
  height: 100%;
  position: static;
  background-color: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
